<template>
	<view class="content">
		<image class="logo" src="../../static/img/logo.png" mode=""></image>
		<view class="title">账号登录</view>
		<view class="form-item">
			<uni-easyinput v-model="username" placeholder="输入账号" prefixIcon="person"></uni-easyinput>
		</view>
		<view class="form-item">
			<uni-easyinput type="password" v-model="password" placeholder="输入密码" prefixIcon="locked"></uni-easyinput>
		</view>
		<view class="submit" @click="submit">登录</view>
		<uni-popup ref="popup" type="bottom">
			<view class="model">
				<view class="title1" v-if="type === 1" style="margin-top: 100rpx;">请输入账号</view>
				<view class="title1" v-if="type === 2" style="margin-top: 100rpx;">请输入密码</view>
				<view class="title1" v-if="type === 3">账号密码不正确</view>
				<view class="title2" v-if="type === 3">请重新输入</view>
				<view class="ok" @click="close">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		postAction
	} from '../../common/request'
	export default {
		data() {
			return {
				username: '',
				password: '',
				type: 0
			}
		},
		onLoad() {

		},
		methods: {
			submit() {
				if (!this.username) {
					this.$refs.popup.open('center')
					this.type = 1
					return
				}
				if (!this.password) {
					this.$refs.popup.open('center')
					this.type = 2
					return
				}
				uni.showLoading({
					mask: true
				})
				postAction('/user/login', {
					username: this.username,
					password: this.password
				}).then(res => {
					uni.hideLoading()
					if (res.code === 0) {
						console.log(res.data.token);
						uni.setStorageSync('token', res.data.token)
						uni.showToast({
							title: '登录成功'
						})
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/tabbar/index/index"
							})
						}, 1000)
					} else {
						this.type = 3
						this.$refs.popup.open('center')
					}

				})
			},
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding-top: 200rpx;

		.logo {
			width: 572rpx;
			height: 154rpx;
			display: block;
			margin: 0 auto;
		}

		.title {
			font-size: 48rpx;
			color: #FF5035;
			line-height: 58rpx;
			margin-top: 74rpx;
			margin-bottom: 54rpx;
			padding-left: 76rpx;
		}

		.form-item {
			width: 650rpx;
			height: 100rpx;
			background: #F5F5F5;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 0 auto;
			margin-bottom: 40rpx;

			input {
				width: 100%;
				height: 100%;
			}

			/deep/.uni-easyinput__content {
				height: 100rpx;
				background-color: transparent !important;
				border-color: transparent !important;
			}
		}

		.submit {
			width: 650rpx;
			height: 100rpx;
			background: #FF5035;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 164rpx auto 0 auto;
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 36rpx;
			text-align: center;
			line-height: 100rpx;
		}

		.model {
			width: 556rpx;
			height: 450rpx;
			background: #FFFFFF;

			text-align: center;
			padding-top: 46rpx;
			box-sizing: border-box;

			.title1 {
				height: 48rpx;
				font-size: 40rpx;
				font-weight: 400;
				color: #969B9E;
				line-height: 48rpx;
			}

			.title2 {
				height: 48rpx;
				font-size: 40rpx;
				font-family: PingFangSC-Regular, PingFangSC-Regular;
				font-weight: 400;
				color: #969B9E;
				line-height: 48rpx;
				margin-top: 64rpx;
			}

			.ok {
				width: 394rpx;
				height: 100rpx;
				background: #FF5035;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;
				border: 2rpx solid #979797;
				margin: 0 auto;
				margin-top: 98rpx;
				line-height: 100rpx;
				color: #FFFFFF;
				font-size: 40rpx;
				position: absolute;
				bottom: 40rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
</style>